<!--
 * @Author: FengTeng
 * @Date: 2021-02-19 20:54:30
 * @LastEditTime: 2021-03-02 10:56:29
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\create-rule-modal\CreateRuleModal.vue
-->
<template>
  <div class="create-rule-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="ruleFormConfig.rules" ref="ruleFormRef" :model="ruleFormData">
        <el-form-item label="首次消费时间" prop="firstExpendTime">
          <el-select
            v-model="ruleFormData.firstExpendTime"
            @change="handleExpendTimeChange()"
            :popper-append-to-body="false"
            placeholder="请选择首次消费时间"
          >
            <el-option label="1个月" :value="1"></el-option>
            <el-option label="3个月" :value="3"></el-option>
            <el-option label="6个月" :value="6"></el-option>
            <el-option label="12个月" :value="12"></el-option>
            <el-option label="24个月" :value="24"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消费金额" prop="expendTotal">
          <el-input v-model="ruleFormData.expendTotal" placeholder="请输入消费金额"></el-input>
        </el-form-item>
        <el-form-item label="优惠折扣" prop="sale">
          <el-input v-model="ruleFormData.sale" placeholder="请输入优惠折扣"></el-input>
          <span class="sale-percent-icon">%</span>
        </el-form-item>
        <el-form-item label="满减额度" prop="reduction">
          <el-select
            v-model="ruleFormData.reduction"
            @change="handleReductionChange()"
            :popper-append-to-body="false"
            placeholder="请选择满减额度"
          >
            <el-option label="3000-500" value="3000-500"></el-option>
            <el-option label="5000-1000" value="5000-1000"></el-option>
            <el-option label="8000-2000" value="8000-2000"></el-option>
            <el-option label="10000-3000" value="10000-3000"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="赠送内容" prop="productDirectors">
          <el-select
            v-model="ruleFormData.present"
            @change="handlePresentChange()"
            :popper-append-to-body="false"
            placeholder="请选择赠送内容"
          >
            <el-option
              v-for="director in productDirectors"
              :label="director.name"
              :value="director.name"
              :key="director.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-option-button">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
export default {
  name: "CreateRuleModal",
  components: {
    SpaModal
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      ruleFormData: {
        firstExpendTime: "",
        expendTotal: "",
        sale: "",
        reduction: "",
        present: ""
      },
      ruleFormConfig: {
        rules: {
          firstExpendTime: [{ required: true, message: "请选择首次消费时间！", trigger: "blur" }],
          expendTotal: [{ required: true, message: "请输入消费金额" }]
        }
      },
      productDirectors: [],
      confirmBtnLoading: false
    };
  },
  methods: {
    openModal() {
      this.modalConfig.visible = true;
      this.requestProducts();
    },
    requestProducts() {
      let that = this;
      $.post(apis.getCustomerTableData, {
        type: "selectshangpin"
      }, resp => {
        resp = JSON.parse(resp);
        if (resp.code === "ok") {
          that.productDirectors = [...resp.data];
        } else {
          this.$message.error(resp.msg);
        }
      })
    },
    handleConfirm() {
      console.log(this.formDataValidate());
      this.confirmBtnLoading = true;
      // 掉接口
      $.post(
        apis.createNewRule,
        {
          time: this.ruleFormData.firstExpendTime,
          xiaofeijine: this.ruleFormData.expendTotal,
          youhui: this.ruleFormData.sale,
          manjian: this.ruleFormData.reduction,
          zengsong: this.ruleFormData.present,
          type: "insert"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            this.$message.success(resp.msg);
            this.modalConfig.visible = false;
            this.resetFormData();
            this.$emit("refresh-table");
          } else {
            this.$message.error(resp.msg);
          }
          this.confirmBtnLoading = false;
        }
      );
    },
    handleExpendTimeChange() {
      this.formItemValidate("firstExpendTime");
    },
    handleReductionChange() {
      this.formItemValidate("reduction");
    },
    handlePresentChange() {
      this.formItemValidate("present");
    },
    handleCancel() {
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    handleDialogClose() {
      this.resetFormData();
    },
    formDataValidate() {
      let valid = false;
      this.$refs.ruleFormRef.validate(_valid => {
        valid = _valid ? true : false;
        return valid;
      });
      return valid;
    },
    formItemValidate(prop) {
      this.$refs.ruleFormRef.validateField(prop, error => {
        if (error) {
          console.error(prop + "未通过校验！");
        }
      });
    },
    resetFormData() {
      console.log("重置表单");
      this.ruleFormData = {
        firstExpendTime: "",
        expendTotal: "",
        sale: "",
        reduction: "",
        present: ""
      };
      this.confirmBtnLoading = false;
      this.$refs.ruleFormRef && this.$refs.ruleFormRef.resetFields();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
